<template>
    <phoneMain />
    <div class="main-body hidden-xs-only">

        <div class="first-pg">
            <div class="left-image"><img src="../static/coinbase-image/hero_3x.png" alt=""></div>
            <div class="right-text">
                <div class="right-text-title">
                    {{ t("home.pg1") }}
                </div>
                <div class="right-text-content">
                    We're the most trusted place for people and businesses to buy, sell, and manage crypto.
                </div>
            </div>

        </div>
        <div class="scond-body">
            <div class="scond-pg">
                <div class="right-text">
                    <div class="right-text-title">
                        Explore crypto like Bitcoin,<br />Ethereum, and Dogecoin
                    </div>
                    <div class="right-text-content">
                        Simply and securely buy, sell, and manage hundreds of cryptocurrencies.
                    </div>
                    <div>
                        <el-button color="rgb(0, 82, 255)" style="padding:25px;border-radius:50px;font-size:14px"
                            size="large" type="primary" round>See more assets</el-button>
                    </div>
                </div>
                <div class="right-tabs">
                    <div class="tabs">
                        <div class="tab" v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)"
                            :class="{ active: index === selectedTab }">
                            {{ tab.label }}

                        </div>

                    </div>
                    <!-- 根据选中的标签显示不同的内容 -->
                    <div class="tab-content-container">
                        <div class="tab-content-item" v-for="(item, index) in tabContent" :key="index">
                            <div>
                                <img class="item-logo" src="../static/coinbase-image/t1.png" alt="">
                            </div>
                            <div class="item-title">
                                {{item.title}}
                            </div>
                            <div class="item-price">
                                {{ item.price  }}
                            </div>
                            <div class="item-precent">
                                <el-icon>
                                    <Bottom />
                                </el-icon>{{ item.percent  }}
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <!-- <div v-for="(tab, index) in tabs" :key="index"> -->

                        <!-- <div v-if="index === selectedTab"> -->

                        <!-- <div class="tab-content-item">
                                    <div>
                                        <img src="../static/coinbase-image/Retail.png" alt="">
                                    </div>
                                    <div>
                                        Bitcoin
                                    </div>
                                    <div>
                                        $7,123.45
                                    </div>
                                    <div>
                                        <el-icon>
                                            <Bottom />
                                        </el-icon>0.19%
                                    </div>
                                </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="third-body">
            <div class="third-pg">
                <div class="right-text">
                    <div class="right-text-content">
                        Take control of your money
                    </div>
                    <div class="right-text-title">
                        Start your portfolio<br /> today and discover <br />crypto
                    </div>
                    
                </div>
                <div class="right-image-content">
                    <img class="right-image" src="../static/coinbase-image/Type_Circles_4x.png" alt="">
                </div>
            </div>
        </div>
        <div class="fourth-body">
            <div class="fourth-pg">
                <div class="left-text">
                    USDC is the dollar for the digital age
                </div>
                <div class="right-text">
                    <div style="margin-bottom: 20px;">USDC gives you 24/7 access to payments and financial services. Trade, spend, and send faster and more efficiently.</div>
                    <el-button color="rgb(255, 255, 255)" style="padding:25px;border-radius:50px;font-size:18px"
                    size="large" type="primary" round>Learn more</el-button>
                </div>

            </div>
        </div>
        <div class="cut-image">
        </div>
        <div class="fifth-pg">
            <div class="left-image"><img src="../static/coinbase-image/Retail.png" alt=""></div>
            <div class="right-text">
                <div>COINBASE</div>
                <div class="right-text-title">
                    Buy, sell, and store hundreds of cryptocurrencies
                </div>
                <div class="right-text-content">
                    From Bitcoin to Dogecoin, we make it easy to buy and sell cryptocurrency. Protect your crypto with best in class cold storage.
                </div>
                <div>
                    <el-button color="rgb(0, 82, 255)" style="padding:25px;border-radius:50px;font-size:14px"
                            size="large" type="primary" round>See more assets</el-button>
                </div>
            </div>

        </div>
        <div class="sixth-pg">
            <div class="left-image"><img src="../static/coinbase-image/Advanced.png" alt=""></div>
            <div class="right-text">
                <div>ADVANCED</div>
                <div class="right-text-title">
                    Powerful tools, designed for the advanced trader
                </div>
                <div class="right-text-content">
                    Powerful analytical tools with the safety and security of Coinbase deliver the ultimate trading experience. Tap into sophisticated charting capabilities, real-time order books, and deep liquidity across hundreds of markets.
                </div>
                <div>
                    <el-button color="rgb(0, 82, 255)" style="padding:25px;border-radius:50px;font-size:14px"
                            size="large" type="primary" round>Start trading</el-button>
                </div>
            </div>

        </div>
        <div class="seven-pg">
            <div class="left-image"><img src="../static/coinbase-image/Wallet.png" alt=""></div>
            <div class="right-text">
                <div>WALLET</div>
                <div class="right-text-title">
                    Do more with your crypto with Coinbase Wallet
                </div>
                <div class="right-text-content">
                    Store your crypto in your own personal crypto wallet and explore decentralized finance (DeFi), buy and sell NFTs, and more.
                </div>
                <div>
                    <el-button color="rgb(0, 82, 255)" style="padding:25px;border-radius:50px;font-size:14px"
                            size="large" type="primary" round>Learn more</el-button>
                </div>
            </div>

        </div>
        <div class="eight-pg">
            <div class="left-image"><img src="../static/coinbase-image/Prime.png" alt=""></div>
            <div class="right-text">
                <div>PRIME</div>
                <div class="right-text-title">
                    The financial institution for a digital asset future

                </div>
                <div class="right-text-content">
                    Coinbase Prime is the first choice for sophisticated investors and institutions that want to invest in digital assets.

                </div>
                <div>
                    <el-button color="rgb(0, 82, 255)" style="padding:25px;border-radius:50px;font-size:14px"
                            size="large" type="primary" round>Learn more</el-button>
                </div>
            </div>

        </div>
        <div class="blue-body">
            <div>
                <div class="fourth-pg">
                    <div class="left-text">
                        Get started in a few minutes
                    </div>
                    <div class="right-text">
                        <div style="margin-bottom: 20px;">
                            Create an account, link your bank account, and start buying & selling.</div>
                        <el-button color="rgb(255, 255, 255)" style="padding:25px;border-radius:50px;font-size:18px"
                        size="large" type="primary" round>Learn more</el-button>
                    </div>
                </div>
                <div class="dataItem-container">
                    <div class="dataItem">
                        <div class="number">$145B</div>
                        <div>QUARTERLY VOLUME TRADED</div>
                    </div>
                    <div class="dataItem">
                        <div class="number">100+</div>
                        <div>COUNTRIES SUPPORTED</div>
                    </div>
                    <div class="dataItem">
                        <div class="number">$130B</div>
                        <div>ASSETS ON PLATFORM</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nineth-body">
            <div class="nineth-pg">
                <div class="top-title">The most trusted cryptocurrency exchange</div>
                <div class="top-content">We're the most trusted place for people and businesses to buy, sell, and manage crypto.</div>
                <div class="list">
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/m1.svg" alt="">
                        </div>
                        <div class="list-title">
                            The largest public crypto company
                        </div>
                        <div class="list-content">
                            We operate with financial transparency.
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/m2.svg" alt="">
                        </div>
                        <div class="list-title">
                            The largest public crypto company
                        </div>
                        <div class="list-content">
                            We operate with financial transparency.
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/m3.svg" alt="">
                        </div>
                        <div class="list-title">
                            The largest public crypto company
                        </div>
                        <div class="list-content">
                            We operate with financial transparency.
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/m4.svg" alt="">
                        </div>
                        <div class="list-title">
                            The largest public crypto company
                        </div>
                        <div class="list-content">
                            We operate with financial transparency.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ten-body">
            <div class="nineth-pg">
                <div class="top-title">New to crypto? Learn some crypto basics</div>
                <div class="top-content">Beginner guides, practical tips, and market updates for first-timers, experienced investors, and everyone in between.</div>
                <div class="list">
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/0_4mVyVaU6yLa--GR_.png" alt="">
                        </div>
                        <div class="list-title">
                            USDC: The digital dollar for the global crypto economy
                        </div>
                        <div class="list-content">
                            Coinbase believes crypto will be part of the solution for creating an open financial system that is both more efficient and more equitable. We co-founded the Centre Consortium in 2018 to invest in the build of USDC, and since then it has become the second largest stablecoin by market capitalization.
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/Replace_Bank.png" alt="">
                        </div>
                        <div class="list-title">
                            Can crypto really replace your bank account?
                        </div>
                        <div class="list-content">
                            If you’re a big enough fan of crypto, you’ve probably heard the phrase “be your own bank” or the term “bankless” — the idea being that crypto can offer more control over your financial future than traditional finance. But how much of your financial life really can be accomplished via crypto?
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="image-container">
                            <img class="item-image" src="../static/coinbase-image/Learn_Illustration_Ultimate_Guide_Bitcoin.png" alt="">
                        </div>
                        <div class="list-title">
                            When is the best time to invest in crypto?
                        </div>
                        <div class="list-content">
                            Cryptocurrencies like Bitcoin can experience daily (or even hourly) price volatility. As with any kind of investment, volatility may cause uncertainty, fear of missing out, or fear of participating at all. When prices are fluctuating, how do you know when to buy?
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="final-body">
            <div class="final-pg">
                <div class="left-text">
                    <div class="left-title">
                        The freedom of crypto for everyone, everywhere
                    </div>
                    <div class="left-content">
                        We’re committed to creating more economic freedom through accessible, safe, and secure financial tools for everyone.
                    </div>
                    <div>
                        <el-button color="rgb(0, 82, 255)" style="padding:25px;border-radius:50px;font-size:14px"
                            size="large" type="primary" round>See more assets</el-button>
                    </div>
                </div>
                <div class="right-image">
                </div>
            </div>
        </div>
        <div class="final-black-body">
            <div class="fourth-pg">
                <div class="left-text">
                    Start your portfolio today
                </div>
                <div class="right-text">
                    <div style="margin-bottom: 20px;">Sign up for a Coinbase account today and see what the world of decentralized finance can do for you.</div>
                    <el-button color="rgb(255, 255, 255)" style="padding:25px;border-radius:50px;font-size:18px"
                    size="large" type="primary" round>Learn more</el-button>
                </div>

            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import { ref } from 'vue';
import phoneMain from '@/components/phoneMain.vue'

// tabs数据
const tabs = ref([
    { label: 'Tradable', content: 'Content for Tab 1' },
    { label: 'Top Gainers', content: 'Content for Tab 2' },
    { label: 'New on Coinbase', content: 'Content for Tab 3' }
]);

const tabContent = ref([
    { title:'Bitcoin',price:'$7,331,252.19',image:'../static/coinbase-image/t1.png',percent:'0.19%',arrow:'Bottom'},
    { title:'Ethereum',price:'$7,331,252.19',image:'../static/coinbase-image/t2.png',percent:'0.19%',arrow:'Bottom'},
    { title:'Dogecoin',price:'$7,331,252.19',image:'../static/coinbase-image/t3.png',percent:'0.19%',arrow:'Top'},
    { title:'Litecoin',price:'$7,331,252.19',image:'../static/coinbase-image/t4.png',percent:'0.19%',arrow:'Top'},
    { title:'Bitcoin',price:'$7,331,252.19',image:'../static/coinbase-image/t5.png',percent:'0.19%',arrow:'Bottom'},
    { title:'Ethereum',price:'$7,331,252.19',image:'../static/coinbase-image/t6.png',percent:'0.19%',arrow:'Top'},


]);

// 当前选中的标签
const selectedTab = ref(0);

// 选择标签
const selectTab = (index) => {
    selectedTab.value = index;
};
</script>
<style lang="scss" scoped>

.main-body {
    .final-black-body{
        width: 100%;
        background-color: rgb(30, 32, 37);
        padding: 50px 0px;

        .fourth-pg {
            display: flex;
            margin: 30px auto;
            width: 1200px;
            justify-content: space-between;
            .left-text {
                width: 30%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: 2rem;
                color: #fff;
                font-size: 30px;
                font-weight: 500;
                margin-bottom: 20px;
            }
            .right-text {
                width: 65%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;
                color: #fff;
                font-size: 16px;
                font-weight: 400;
                
            }
        }
    }
    .final-body{
        width: 100%;
        background-color: #fff;

        .final-pg {
            display: flex;
            margin: 0px auto;
            width: 1200px;
            justify-content: space-between;

            .left-text {
                width: 60%;
                height: 900px;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;
                font-size: 2rem;
                color: #000;
                font-size: 30px;

                margin-bottom: 20px;
                .left-title {
                    
                    margin-bottom: 40px;
                }
            }
            .left-content{
                font-size: 2rem;
                color: rgb(91, 97, 110);
                font-size: 20px;
                font-weight: 400;
                text-align: left;
                margin-bottom: 20px;
            }

            .right-image {
                width: 55%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-image: url('../static/coinbase-image/tools.png');
                background-position: 0 0;
                background-size: cover;

                font-size: 2rem;
                .image-item {
                    width: 100%;
                }
            }
        }
    }
    .ten-body{
        width: 100%;
        background-color: rgb(238, 240, 243);
        padding: 50px 0px;

        .nineth-pg {
            margin: 50px auto;
            width: 1200px;
            align-items: flex-start;
            .top-title {
                font-size: 38px;
                color: #000;
                font-size: 30px;
                font-weight: 400;
                margin-bottom: 20px;
            }
            .top-content {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;
                color: rgb(91, 97, 110);
                font-size: 20px;
                font-weight: 400;
                
            }
            .list{
                display: flex;
                margin: 50px auto;
                justify-content: space-between;
                width: 1200px;
                .list-item{
                    display: flex;
                    flex-direction: column;
                    width: 372px;
                    align-items: flex-start;
                    min-height: 300px;
                    .image-container{
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        .item-image{
                            width: 372px;
                            height: 220px;
                            border-radius: 20px;
                        }
                    }
                    
                    .list-title{
                        font-size: 28px;
                        margin-top: 20px;
                        margin-bottom: 20px;
                    }
                    .list-content{
                        font-size: 16px;
                        font-weight: 400;
                        text-align: left;
                        color: rgb(91, 97, 110);
                        margin-bottom: 80px;
                    }
                }
            
            }
        }
    }
    .nineth-body{
        width: 100%;
        background-color: #fff;
        padding: 50px 0px;

        .nineth-pg {
            margin: 50px auto;
            width: 1200px;
            align-items: flex-start;
            .top-title {
                font-size: 38px;
                color: #000;
                font-size: 30px;
                font-weight: 400;
                margin-bottom: 20px;
            }
            .top-content {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;
                color: rgb(91, 97, 110);
                font-size: 20px;
                font-weight: 400;
                
            }
            .list{
                display: flex;
                justify-content: space-between;
                margin: 50px auto;
                width: 1200px;
                .list-item{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 30px 30px;
                    align-items: flex-start;
                    width: 17%;
                    min-height: 300px;
                    border-radius: 5px;
                    border: 1px solid rgb(222, 223, 226);
                    box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px;
                    .image-container{
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        .item-image{
                            width: 80px;
                            height: 80px;
                        }
                    }
                    
                    .list-title{
                        font-size: 28px;
                        margin-top: 20px;
                        margin-bottom: 20px;
                    }
                    .list-content{
                        font-size: 16px;
                        font-weight: 400;
                        text-align: left;
                        color: rgb(91, 97, 110);
                        margin-bottom: 80px;
                    }
                }
            
            }
        }
    }
    .blue-body{
        width: 100%;
        background-color: rgb(0, 82, 255);
        padding: 50px 0px;

        .fourth-pg {
            display: flex;
            margin: 30px auto;
            width: 1100px;
            justify-content: space-between;
            .left-text {
                width: 40%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: 2rem;
                color: #fff;
                font-size: 30px;
                font-weight: 500;
                margin-bottom: 20px;
            }
            .right-text {
                width: 55%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;
                color: #fff;
                font-size: 16px;
                font-weight: 400;
                
            }
        }
        .dataItem-container{
            display: flex;
            justify-content: space-around;
            margin: 30px auto;
            width: 1200px;
            margin-top: 50px;
            .dataItem{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                color: #fff;
                font-size: 14px;
                font-weight: 500;
                border-left: 1px solid #fff;
                padding-left: 40px;
                .number{
                    font-size: 85px;
                    font-weight: 500;
                }

            }
        
        }
    }
    .eight-pg{
        display: flex;
        margin: 50px auto;
        width: 1100px;
        justify-content: space-between;

        .left-image {
            width: 40%;
            text-align: center;
            img {
                height: 700px;
            }
        }

        .right-text {
            width: 50%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            font-size: 2rem;

            .right-text-title {
                font-size: 45px;
                font-weight: 500;
                margin-bottom: 20px;
                margin-top: 20px;
            }

            .right-text-content {
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 30px;
            }
        }
    }
    .seven-pg{
        display: flex;
        margin: 50px auto;
        width: 1200px;
        justify-content: space-between;

        .left-image {
            width: 40%;
            text-align: center;
            img {
                height: 700px;
            }
        }

        .right-text {
            width: 50%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            font-size: 2rem;

            .right-text-title {
                font-size: 45px;
                font-weight: 500;
                margin-bottom: 20px;
                margin-top: 20px;
            }

            .right-text-content {
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 30px;
            }
        }
    }
    .sixth-pg{
        display: flex;
        margin: 50px auto;
        width: 1200px;
        justify-content: space-between;

        .left-image {
            width: 40%;
            text-align: center;
            img {
                height: 700px;
            }
        }

        .right-text {
            width: 50%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            font-size: 2rem;

            .right-text-title {
                font-size: 45px;
                font-weight: 500;
                margin-bottom: 20px;
                margin-top: 20px;
            }

            .right-text-content {
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 30px;
            }
        }
    }
    .fifth-pg{
        display: flex;
        margin: 50px auto;
        width: 1100px;
        justify-content: space-between;

        .left-image {
            width: 40%;
            text-align: center;
            img {
                height: 700px;
            }
        }

        .right-text {
            width: 50%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            font-size: 2rem;

            .right-text-title {
                font-size: 45px;
                font-weight: 500;
                margin-bottom: 20px;
                margin-top: 20px;
            }

            .right-text-content {
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 30px;
            }
        }
    }
    .cut-image{
        background-image: url("../static/coinbase-image/cb-banner.png");
        height: 150px;
        background-position: 0px -390px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .fourth-body{
        width: 100%;
        background-color: rgb(30, 32, 37);
        padding: 50px 0px;

        .fourth-pg {
            display: flex;
            margin: 30px auto;
            width: 1100px;
            justify-content: space-between;
            .left-text {
                width: 40%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: 2rem;
                color: #fff;
                font-size: 30px;
                font-weight: 500;
                margin-bottom: 20px;
            }
            .right-text {
                width: 55%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;
                color: #fff;
                font-size: 16px;
                font-weight: 400;
                
            }
        }
    }
    .third-body {
        width: 100%;
        background-color: #fff;
        padding: 50px 0px;

        .third-pg {
            display: flex;
            margin: 50px auto;
            width: 1100px;
            justify-content: space-between;


            .right-text {
                margin-top: 50px;
                width: 50%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;
                .right-text-title {
                    font-size: 40px;
                    font-weight: 500;
                    margin-bottom: 20px;
                }

                .right-text-content {
                    font-size: 28px;
                    font-weight: 400;
                    margin-bottom: 20px;
                }
            }

            .right-image-content {
                width: 60%;

                img {
                    width: 100%;
                }
            }
        }
    }
    .scond-body {
        width: 100%;
        background-color: #f6f8fe;
        padding: 50px 0px;

        .scond-pg {
            display: flex;
            margin: 50px auto;
            width: 1100px;
            justify-content: space-between;

            .left-image {
                width: 60%;

                img {
                    width: 100%;
                }
            }

            .right-text {
                width: 55%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                font-size: 2rem;

                .right-text-title {
                    font-size: 30px;
                    font-weight: 500;
                    margin-bottom: 20px;
                }

                .right-text-content {
                    font-size: 28px;
                    font-weight: 400;
                    margin-bottom: 20px;
                }
            }

            .right-tabs {
                width: 60%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;

                .tabs {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .tab {
                        width: 100%;
                        white-space: nowrap;
                        padding: 10px 10px;
                        margin: 10px 0;
                        margin-right: 10px;
                        cursor: pointer;
                        text-align: center;
                        border-radius: 20px;

                        &:hover {
                            background-color: #f6f8fe;
                        }
                    }

                    .active {
                        border: 1px solid rgb(0, 82, 255);
                        color: rgb(0, 82, 255);
                    }

                }

                .tab-content-container {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    margin-right: 15px;
                    justify-content: space-around;

                    .tab-content-item {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;
                        padding: 20px;
                        width: 132px;
                        border-radius: 20px;
                        background-color: #fff;
                        margin-top: 20px;
                        box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px;

                        .item-logo {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                        }

                        .item-title {

                            font-size: 16px;
                            font-weight: 500;
                        }

                        .item-price {
                            font-size: 16px;
                            color: rgb(91, 97, 110);
                            margin-bottom: 10px;
                            font-weight: 500;
                        }

                        .item-precent {
                            font-size: 24px;
                            display: flex;
                            color: rgb(207, 32, 48);
                            align-items: center;
                            font-weight: 500;

                        }
                    }
                }

            }
        }
    }

    .first-pg {
        display: flex;
        margin: 50px auto;
        width: 1100px;
        justify-content: space-between;

        .left-image {
            width: 60%;

            img {
                width: 100%;
            }
        }

        .right-text {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 2rem;

            .right-text-title {
                font-size: 56px;
                font-weight: 500;
                margin-bottom: 20px;
            }

            .right-text-content {
                font-size: 28px;
                font-weight: 400;
            }
        }
    }
}
</style>